<template>
<div>
  <!-- <yd-navbar title="评分">
    <router-link to="#" slot="left" style="color:#ff6634">
      取消
    </router-link>
    <router-link to="" slot="right">
      <yd-button size="large" type="warning" bgcolor="#ff6634" color="#fff" style="height:40px;line-height:40px;" @click="clickf">发表</yd-button>
    </router-link>
  </yd-navbar> -->
  <div class="stardiv">
    <div style="width:30%;height:50px;float:left;line-height:50px;padding-left:10px;">总体评价:</div>
    <div style="width:70%;float:left;">
      <yd-cell-group style="width:100%">
        <yd-cell-item  style="height:50px;">
          <yd-rate slot="right" v-model="rate1"></yd-rate>
        </yd-cell-item>
      </yd-cell-group>
    </div>
  </div>
  <yd-cell-group>
    <yd-cell-item>
      <yd-textarea slot="right" placeholder="亲~菜品的口味如何，环境怎么样，服务满意吗？" maxlength="300" v-model="speakbody"></yd-textarea>
    </yd-cell-item>
</yd-cell-group>
<div class="bfengexian"></div>
<div class="sctpwz">上传图片</div>
<div class="imgandvideo">
<div class="ivleft">
<!-- <yd-lightbox v-if="uploadimglist.length>0">
  <div style="overflow-y: hidden;float:left;">
    <yd-lightbox-img class="pinglunimgdiv" v-for="(item, $index) in 4" :key="$index" :src="uploadimglist[0]">
    </yd-lightbox-img>
  </div>
</yd-lightbox>
<div class="pinglunimgdiv" @click="uploadimg">
  上传照片
</div> -->
<div class="hd-upload">
  <!-- 显示图片部分 -->
  <div class="hd-upload-card-img" v-for="(item, index) in imgArr" :key="index">
    <img :src="item">
    <div class="hd-upload-card-img-bash" @click="deleteImage(index)">
      <i class="yd-icon-home"></i>
    </div>
  </div>
  <!-- 自定义上传组件 -->
  <div class="hd-upload-card hd-upload-card-a">
    <i class="yd-icon-star" style="font-size: 0.6rem; color: rgb(255, 104, 93);"></i>
    <hd-upload @filesChange="imageChange"/>
  </div>
</div>
</div>
<!-- <div class="ivright" v-if="imgArr.length==0">
100字+3张图或20秒视频有机会赢<span style="color:#f1b8a5">100积分</span>
</div> -->
</div>
<!-- <div class="bfengexian"></div>
<div class="zpcdiv">
<yd-cell-group>
  <yd-cell-item arrow>
    <span slot="left">推荐菜</span>
    <span slot="right">五道推荐菜可选</span>
  </yd-cell-item>
</yd-cell-group>
<div class="caiming" :class="caidan[0].active == 'true'?'caimingxz':''" v-on:click="choose($index)">{{caidan[0].name}}</div>
<div :class="caiming">蒸熊掌</div>
<div :class="caiming">蒸鹿尾儿</div>
<div :class="caiming">烧花鸭</div>
<div :class="caiming">烧雏鸡</div>
</div> -->
<div class="bfengexian"></div>
<yd-cell-group class="rjmoney">
  <yd-cell-item>
    <span slot="left">人均：</span>
    <yd-input slot="right" v-model="input1" placeholder="¥ 请输入消费金额"></yd-input>
  </yd-cell-item>
</yd-cell-group>
<yd-button size="large" type="warning" bgcolor="#ff6634" color="#fff" style="height:40px;line-height:40px;margin-top:15px;float:left;" @click.native="clickf">发表</yd-button>
</div>
</template>

<script>
import {upLoadFileByBase64, dataURLtoBlob} from 'hdc/mixin'
export default {
  mixins: [
    upLoadFileByBase64,
    dataURLtoBlob
  ],
  data() {
    return {
      rate1: 3,
      input1: '',
      caiming: 'caiming',
      caimingxz: 'caimingxz',
      speakbody: '',
      imgArr: [],
      content: '',
      imguplist: [],
      ossstr: '',
      caidan: [
        {
          name: 'caiming',
          active: 'true'
        }
      ]
    }
  },
  mounted: function() {
  },
  methods: {
    // 获取图片地址
    async getOssPath() {
      let gdetail = []
      // 如果使用循环,不能是用 foreach 解析
      for (let item of this.imgArr) {
        gdetail.push(await this.upLoadFileByBase64(item))
      }
      return gdetail
    },
    async clickf() {
      let imguplist = await this.getOssPath()
      if (imguplist && imguplist.length > 0) {
        imguplist = imguplist.join()
      } else {
        imguplist = ''
      }
      this.hdAjax({
        url: this.API.createComment,
        method: 'post',
        data: {
          place_id: this.$route.query.id,
          place_type: this.$route.query.type,
          content: this.speakbody,
          score: this.rate1,
          source_type: 'M',
          image: imguplist
        },
        success: (resultData) => {
          console.log('====================================')
          console.log('发表成功')
          console.log('====================================')
          this.$dialog.alert({
            mes: '发表成功,请等待管理员审核!',
            callback: () => {
              this.$router.go(-1)
            }
          });
        }
      });
    },
    // clickf: async function() {
    //   await this.imgArr.forEach(async (element) => {
    //     await this.upLoadFileByBase64(element).then((urllist) => {
    //       console.log(urllist)
    //       this.imguplist.push(urllist)
    //     })
    //   }).then(() => {
    //     console.log(Array.from(this.imguplist))
    //   })
      // this.hdAjax({
      //   url: this.API.createComment,
      //   data: {
      //     place_id: this.$route.query.id,
      //     place_type: this.$route.query.type,
      //     content: this.speakbody,
      //     score: this.rate1,
      //     source_type: 'M',
      //     image: this.imguplist
      //   },
      //   success: (resultData) => {
      //     alert('发表成功');
      //   }
      // });
    // },
    choose: function (index) {
      if (this.caidan[index].active === 'true') {
        this.caidan[index].active = false;
      }
      if (this.caidan[index].active === 'false') {
        this.caidan[index].active = true;
      }
    },
     /**
     * 返回图片
     * @files 文件对象
     * @srcs 图片 src 数组
     */
    imageChange(files) {
      const reader = new FileReader();
      // 读取图片
      reader.onload = (e) => {
        let src = e.target.result;
        // 添加图片预览
        this.addImage(src)
      }
      reader.readAsDataURL(files[0]);
    },
    // 添加图片
    addImage(src) {
      // 赋值给 img 以 base64 形式显示
      this.imgArr.push(src)
    },
    // 删除图片
    deleteImage(index) {
      // 删除图片
      this.imgArr.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.ztpj{
  width: 100%;
  height: 50px;
  padding-top: 5px;
  font-size: 18px;
  line-height: 50px;
  border: 1px solid #f0f0f0;
}
.btn-block{
  margin: 0;
}
.bfengexian{
  float: left;
  width: 100%;
  height: 15px;
  background-color: #f0f0f0;
  margin-top: 0px;
}
.m-cell-box {
  margin-bottom: 0;
}
.yd-cell-box {
  margin-bottom: 0;
}
.yd-btn-block {
  margin-top: 0;
}
.stardiv{
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 18px;
}
.imgandvideo{
  float: left;
  width: 100%;
  min-height: 130px;
}
.ivleft{
  float: left;
  padding: 5px 0px;
  width: 100%;
  height: auto;
}
.ivright{
  float: left;
  padding: 50px 0px 15px 0px;
  width: 150px;
  min-height: 130px;
  text-align: center;
}
.scimg{
  float: left;
  width: 100px;
  height: 100px;
  border: 3px #f0f0f0 dotted;
  margin-left: 5px;
  text-align: center;
  line-height: 100px;
}
.pinglunimgdiv{
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  padding: 3px;
  width: 100px;
  min-height: 100px;
  border: 3px #f0f0f0 dotted;
  overflow: hidden;
  line-height: 100px;
  text-align: center;
}
.pinglunimgdiv img{
  float: left;
  width: 100px;
  height: 100px;
}
.scvideo{
  float: left;
  width: 100px;
  height: 100px;
  border: 3px #f0f0f0 dotted;
  margin-left: 20px;
  text-align: center;
  line-height: 100px;
}
.zpcdiv{
  float: left;
  width: 100%;
  min-height: 110px;
  padding-bottom: 5px;
}
.caiming{
  float: left;
  height: 30px;
  padding: 0 15px;
  border: 1px solid #bbbbbb;
  border-radius: 2px;
  line-height: 30px;
  margin-top: 10px;
  margin-left: 10px;
}
.caimingxz{
  background-color: #ff6634;
  color: #ffffff;
}
.rjmoney{
  width: 100%;
  float: left;
}
.sctpwz{
  float: left;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px #f0f0f0 solid;
  font-size: 18px;
  padding-left: 5px;
}
</style>

<style lang="stylus" scoped>
.hd-upload
  display flex
  width 100%
  flex-flow wrap
.hd-upload-card
  position relative
  flex 0 0 32%
  box-sizing border-box
  border 1px dashed #c0ccda
  background-color #fbfdff
  border-radius 6px
  text-align center
  margin .05rem
.hd-upload-card-img
  position relative
  flex 0 0 32%
  margin .05rem
  height 2.4rem
  img
    height 100%
    width 100%
    border 1px solid #ebebeb
  &-bash
    position absolute
    bottom 0
    background-color rgba(88, 88, 88, 0.73)
    color #ffffff
    width 100%
    height .5rem
    text-align center
    font-size .4rem
.hd-upload-card-a
  line-height 2.2rem
.hd-img-auto
  width 100%
  height 100%
</style>